import { Fragment } from 'react';
import Link from 'next/link';
import styles from '@/styles/AboutUs.module.scss';
import Breadcrumb from '@/components/Breadcrumb';
import { map_data } from '@/staticData';

export default function WebMap() {

    return (
        <div className={styles['about-us-map']}>
            <div className="max-content">
                <Breadcrumb params={[
                    { name: '关于我们', url: '/about_us' },
                    { name: '网站地图', url: '/about_us/map' }
                ]} />
                <div className={styles['content-map']}>
                    <div className={styles['list-map']}>
                        {
                            map_data.map((data,index) => {
                                const { title, list } = data;
                                return <Fragment key={index}>
                                    <h3 className={styles['map-title']}>{title}</h3>
                                    <ul className={styles['map-item']}>
                                        {
                                            list.map((li, idx1) => {
                                                const { subTitle, subList } = li;
                                                return  <li key={idx1}>
                                                    <span>{subTitle ? (subTitle + "：") : ""}</span>
                                                    {
                                                        subList.map((sLi, idx2) => {
                                                            return <Link href={sLi.url} key={idx2}><a target="_blank">{sLi.name}</a></Link>
                                                        })
                                                    }
                                                </li>
                                            })
                                        }
                                    </ul>
                                </Fragment>
                            })
                        }
                    </div>
                </div> 
            </div>
        </div>
    )
}